<template>
  <div>
    <div style="margin: 10px; text-align: center">
      <!-- <el-button
        v-if="deptId > 0"
        class="filter-item"
        style="margin-right: 10px"
        type="success"
        icon="el-icon-document-copy"
        size="small"
        @click="initAssignKeeper"
      >
        指派管家
      </el-button> -->
      <el-button
        class="filter-item"
        style="margin-right: 100px"
        type="primary"
        icon="el-icon-edit"
        size="small"
        @click="handleCreate"
      >
        创建顾客
      </el-button>
      <el-input
        v-model="condition1"
        class="filter-item"
        style="width: 200px; margin-right: 10px"
        placeholder="所属门店"
        size="small"
      />
      <el-input
        v-model="condition2"
        class="filter-item"
        style="width: 200px; margin-right: 10px"
        placeholder="顾客姓名"
        size="small"
      />
      <el-input
        v-model="condition3"
        class="filter-item"
        style="width: 200px; margin-right: 10px"
        placeholder="顾客编号"
        size="small"
      />
      <el-input
        v-model="condition4"
        class="filter-item"
        style="width: 200px; margin-right: 10px"
        placeholder="顾客管家"
        size="small"
      />
      <!-- <el-date-picker
        v-model="condition2"
        class="filter-item"
        style="width: 200px; margin-right: 10px"
        type="date"
        placeholder="起始日期"
        size="small"
      />
      <el-date-picker
        v-model="condition3"
        class="filter-item"
        style="width: 200px; margin-right: 10px"
        type="date"
        placeholder="结束日期"
        size="small"
      /> -->
      <el-button
        class="filter-item"
        style="margin-right: 10px"
        type="primary"
        icon="el-icon-search"
        size="small"
        @click="searchClerk"
      >
        查询
      </el-button>
      <el-button
        class="filter-item"
        style="margin-right: 10px"
        icon="el-icon-refresh"
        size="small"
        @click="resetClerk"
      >
        重置
      </el-button>
    </div>

    <el-table
      ref="clerkTable"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <!-- <el-table-column type="selection" align="center" width="55" /> -->
      <el-table-column
        label="查看"
        align="center"
        width="190"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <!-- <el-link
            v-if="row.pic && row.pic.length > 0"
            :href="row.pic"
            target="_blank"
            type="success"
            style="margin-right: 5px"
            >照片</el-link
          > -->
          <el-button type="success" size="mini" plain @click="consumerTag(row)">
            标签
          </el-button>
          <el-button type="primary" size="mini" plain @click="replay(row.id)">
            时间线
          </el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="ccode"
        label="顾客编号"
        align="center"
        width="170"
        show-overflow-tooltip
      /> -->
      <el-table-column prop="cname" label="姓名" align="center" width="180" />
      <el-table-column
        prop="sname"
        label="所属门店"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column prop="kname" label="管家" align="center" width="130" />
      <el-table-column
        prop="sex"
        label="性别"
        align="center"
        width="50"
        :formatter="sexf"
      />
      <el-table-column
        prop="tel"
        label="联系方式"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="solar"
        label="阳历出生日期"
        align="center"
        width="130"
      />
      <el-table-column
        prop="lunar"
        label="阴历出生日期"
        align="center"
        width="140"
      />
      <el-table-column
        label="查看报告"
        align="center"
        width="100"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <div v-if="row.status == 1" style="background: #FFF8EE;
            border-radius: 2px 2px 2px 2px;
            border: 1px solid #FFE1B3;">
            <el-link
              :href="'/customreport/' + row.id + '.pdf'"
              target="_blank"
              type="warning"
              style="margin-right: 5px"
            >终极报告</el-link>
          </div>
          <div v-else style="background: #F0EEFF;
            border-radius: 2px 2px 2px 2px;
            border: 1px solid #B9B3FF;">
            <el-link
              :href="'/customreport/' + row.id + '.pdf'"
              target="_blank"
              type="primary"
              style="margin-right: 5px"
              >初级报告</el-link
            >
          </div>

        </template>
      </el-table-column>
      <el-table-column label="所在阶段" align="center" width="150">
        <template slot-scope="{ row }">
          <span>{{ row.trust | fltTrust }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="创建日期" width="100px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.createTime | parseTime }}</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column
        label="个人主页"
        align="center"
        width="100"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-link
            :href="'/#/show/clerk/' + row.id + '?ccode='+ row.ccode"
            target="_blank"
            type="primary"
          >个人主页</el-link>
        </template>
      </el-table-column> -->
      <el-table-column
        label="成交"
        align="center"
        width="100"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button type="text" size="mini" @click="dealList(row.id)">
            查看记录
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="180"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row, $index }">
          <el-button
            type="primary"
            size="mini"
            @click="handleUpdate(row)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            size="mini"
            @click="handleDelete(row.id, $index)"
          >
            删除
          </el-button>
          <!-- <el-button type="warning" size="mini" @click="initFace(row)">
            面部
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      style="margin-top: -100px"
    >
      <el-form
        ref="dataForm"
        :model="clerk"
        label-width="0px"
        style="margin-left: 0px"
        :rules="rules"
      >
        <el-form-item
            style="margin-bottom: 15px"
            label-width="100px"
            label="顾客姓名"
            prop="cname"
          >
            <el-input v-model="clerk.cname" />
          </el-form-item>
        <el-form-item label="顾客编号" label-width="100px">
          <el-tag type="warning">{{ clerk.ccode }}</el-tag>
        </el-form-item>
        <el-form-item label="所属店铺" label-width="100px" prop="sid">
          <el-select
            v-model="clerk.sid"
            style="width: 100%"
            placeholder="请选择"
            @change="selectSalon($event)"
          >
            <el-option
              v-for="item in listSalon"
              :key="item.id"
              :label="item.sname"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="顾客迁移" label-width="100px">
          <!-- <el-select
            v-model="clerk.kid"
            style="width: 100%"
            placeholder="选填"
          >
            <el-option
              v-for="item in listKeeps"
              :key="item.id"
              :label="item.nickName"
              :value="item.id"
            />
          </el-select> -->
          <el-radio-group v-model="clerk.kid">
            <el-radio-button v-for="(item, index) in listKeeps" :key="index" :label="item.id">{{ item.nickName }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item
            style="margin-bottom: 25px"
            label-width="100px"
            label="联系方式"
          >
            <el-input
              v-model="clerk.tel"
              placeholder="顾客的电话或微信号"
            />
        </el-form-item>
        <el-form-item label-width="100px" label="说明">
          <el-input v-model="clerk.demand" placeholder="备注说明" />
        </el-form-item>
          <!-- </el-col>
          <el-col :span="15" :offset="1">
            <el-form-item>
              <el-date-picker
                v-model="picker"
                type="month"
                value-format="yyyy-MM"
                placeholder="选择出生月份"
                @change="changeDate"
              />
              <calendar
                ref="calendar"
                width="580px"
                style="line-height: 20px"
                :show-title="false"
                :show-festival="false"
                :show-term="false"
                @date-click="wnlclick($event)"
              />
            </el-form-item>
          </el-col> -->
      </el-form>

      <div slot="footer" class="dialog-footer">
        <!-- <el-button ref="btn" @click="testClick">试试</el-button> -->
        <el-button @click="dialogFormVisible = false"> 取消 </el-button>
        <el-button type="primary" @click="updateData()"> 确定 </el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="指派管家"
      :visible.sync="showAssgin"
      style="margin-top: -100px"
    >
      <h2>选择门店</h2>
      <div>
        <el-radio-group v-model="theSalon" size="medium" @change="onTheSalon">
          <el-radio-button v-for="(item, index) in salonsOfMid" :key="index" :label="item.id">{{ item.sname }}</el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="theSalon">
        <h2>选择客户</h2>
        <div>
          <el-checkbox-group v-model="theClerks" size="medium">
            <el-checkbox-button v-for="(item, index) in clerksOfSalon" :key="index" :label="item.id">{{ item.cname }}</el-checkbox-button>
          </el-checkbox-group>
        </div>
        <h2>选择管家</h2>
        <div style="margin-bottom: 20px;">
          <el-radio-group v-model="theKeepr" size="medium">
            <el-radio-button v-for="(item, index) in listKeeps" :key="index" :label="item.id">{{ item.nickName }}</el-radio-button>
          </el-radio-group>
        </div>
        <el-divider ></el-divider>
        <div slot="footer" class="dialog-footer" style="display: flex;justify-content: center;">
          <el-button @click="leaveAssgin"> 离开 </el-button>
          <el-button v-if="theKeepr && theClerks.length > 0" type="success" @click="updateAssgin"> 提交 </el-button>
          <el-button v-else type="success" disabled @click="updateAssgin"> 提交 </el-button>
        </div>
      </div>
    </el-dialog>
    <el-drawer
      title="顾客标签"
      :visible.sync="dialog"
      direction="ltr"
      custom-class="demo-drawer"
    >
      <el-row :gutter="20" class="demo-drawer__content">
        <el-col :span="3" :offset="0">等级：</el-col>
        <el-col :span="2" :offset="0">
          <el-tag :type="clerk.grade | typeFilter">
            {{ clerk.grade | gradeFilter }}
          </el-tag>
        </el-col>
        <el-col :span="4" :offset="0">信任成长：</el-col>
        <el-col :span="9" :offset="0">
          <el-select v-model="clerk.trust">
            <el-option
              v-for="item in optTrust"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3" :offset="0">性格：</el-col>
        <el-col :span="3" :offset="0">{{ clerk | bg5Ftr }}</el-col>
      </el-row>
      <el-divider />
      <div class="interest">
        <div>
          <span class="demonstration">婚内感情</span>
          <el-rate v-model="clerk.xq1" :max="3" @change="change(1, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">家庭生活</span>
          <el-rate v-model="clerk.xq2" :max="3" @change="change(2, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">婚外感情</span>
          <el-rate v-model="clerk.xq3" :max="3" @change="change(3, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">未婚感情（对男人）</span>
          <el-rate v-model="clerk.xq4" :max="3" @change="change(4, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">同性感情</span>
          <el-rate v-model="clerk.xq5" :max="3" @change="change(5, $event)"></el-rate>
        </div>
      </div>
      <div class="interest">
        <div>
          <span class="demonstration">取财方式（务实）</span>
          <el-rate v-model="clerk.xq6" :max="3" @change="change(6, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">财富运势（务虚）</span>
          <el-rate v-model="clerk.xq7" :max="3" @change="change(7, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">守财能力</span>
          <el-rate v-model="clerk.xq8" :max="3" @change="change(8, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">事业与职场</span>
          <el-rate v-model="clerk.xq9" :max="3" @change="change(9, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">子女教育</span>
          <el-rate v-model="clerk.xq10" :max="3" @change="change(10, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">子女成就和缘分</span>
          <el-rate v-model="clerk.xq11" :max="3" @change="change(11, $event)"></el-rate>
        </div>
      </div>
      <div class="interest">
        <div>
          <span class="demonstration">心性修炼与精神状态</span>
          <el-rate v-model="clerk.xq12" :max="3" @change="change(12, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">情商修炼</span>
          <el-rate v-model="clerk.xq13" :max="3" @change="change(13, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">人生运势</span>
          <el-rate v-model="clerk.xq14" :max="3" @change="change(14, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">国学文化</span>
          <el-rate v-model="clerk.xq15" :max="3" @change="change(15, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">星座等西方文化</span>
          <el-rate v-model="clerk.xq16" :max="3" @change="change(16, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">健康习惯：饮食健身等</span>
          <el-rate v-model="clerk.xq17" :max="3" @change="change(17, $event)"></el-rate>
        </div>
      </div>
      <div class="interest">
        <div>
          <span class="demonstration">身体健康问题</span>
          <el-rate v-model="clerk.xq18" :max="3" @change="change(18, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">美妆与穿搭</span>
          <el-rate v-model="clerk.xq19" :max="3" @change="change(19, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">家居陈设与风水实战</span>
          <el-rate v-model="clerk.xq20" :max="3" @change="change(20, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">美食</span>
          <el-rate v-model="clerk.xq21" :max="3" @change="change(21, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">爱美、美容</span>
          <el-rate v-model="clerk.xq22" :max="3" @change="change(22, $event)"></el-rate>
        </div>
      </div>
      <div class="interest">
        <div>
          <span class="demonstration">艺术品鉴赏</span>
          <el-rate v-model="clerk.xq23" :max="3" @change="change(23, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">豪门礼仪</span>
          <el-rate v-model="clerk.xq24" :max="3" @change="change(24, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">旅行</span>
          <el-rate v-model="clerk.xq25" :max="3" @change="change(25, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">偶像</span>
          <el-rate v-model="clerk.xq26" :max="3" @change="change(26, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">未来之谜</span>
          <el-rate v-model="clerk.xq27" :max="3" @change="change(27, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">未来梦想</span>
          <el-rate v-model="clerk.xq28" :max="3" @change="change(28, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">成长与认知</span>
          <el-rate v-model="clerk.xq29" :max="3" @change="change(29, $event)"></el-rate>
        </div>
      </div>
      <div class="interest">
        <div>
          <span class="demonstration">热门事件</span>
          <el-rate v-model="clerk.xq30" :max="3" @change="change(30, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">人际关系，朋友</span>
          <el-rate v-model="clerk.xq31" :max="3" @change="change(31, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">兴趣爱好</span>
          <el-rate v-model="clerk.xq32" :max="3" @change="change(32, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">父母</span>
          <el-rate v-model="clerk.xq33" :max="3" @change="change(33, $event)"></el-rate>
        </div>
        <div>
          <span class="demonstration">家乡</span>
          <el-rate v-model="clerk.xq34" :max="3" @change="change(34, $event)"></el-rate>
        </div>
      </div>
      <el-divider />
      <div style="margin-left: 10px">
        <p>出生年：</p>
        <el-radio-group v-model="clerk.bg1">
          <el-radio :label="0">其他</el-radio>
          <el-radio :label="1">60后</el-radio>
          <el-radio :label="2">70后</el-radio>
          <el-radio :label="3">80后</el-radio>
          <el-radio :label="4">90后</el-radio>
          <el-radio :label="5">00后</el-radio>
          <el-radio :label="6">10后</el-radio>
        </el-radio-group>
        <p>消费力：</p>
        <el-radio-group v-model="clerk.bg2">
          <el-radio :label="0">超有钱</el-radio>
          <el-radio :label="1">有钱</el-radio>
          <el-radio :label="2">普通</el-radio>
          <el-radio :label="3">没钱</el-radio>
        </el-radio-group>
        <p>消费意愿：</p>
        <el-checkbox-group v-model="bg3List">
          <el-checkbox label="1">生美级</el-checkbox>
          <el-checkbox label="2">水光医美级</el-checkbox>
          <el-checkbox label="3">光电医美级</el-checkbox>
          <el-checkbox label="4">肉毒级</el-checkbox>
          <el-checkbox label="5">玻尿酸级</el-checkbox>
          <el-checkbox label="6">高级材料针剂级</el-checkbox>
          <el-checkbox label="7">整形外科级</el-checkbox>
        </el-checkbox-group>
        <p>曾经消费：</p>
        <el-checkbox-group v-model="bg4List">
          <el-checkbox label="1">生美美容</el-checkbox>
          <el-checkbox label="2">生美减肥</el-checkbox>
          <el-checkbox label="3">肉毒</el-checkbox>
          <el-checkbox label="4">玻尿酸</el-checkbox>
          <el-checkbox label="5">水光针</el-checkbox>
          <el-checkbox label="6">光电</el-checkbox>
          <el-checkbox label="7">再生材料</el-checkbox>
          <el-checkbox label="8">胶原蛋白</el-checkbox>
          <el-checkbox label="9">骨性材料</el-checkbox>
          <el-checkbox label="10">整形外科</el-checkbox>
          <el-checkbox label="11">大健康</el-checkbox>
        </el-checkbox-group>
      </div>
      <!-- <div class="demo-drawer__footer">
        <el-button @click="dialog = false" style="width: 200px"
          >直接离开</el-button
        >
        <el-button type="primary" style="width: 200px" @click="setTags()"
          >提交变更</el-button
        >
      </div> -->
    </el-drawer>

    <el-drawer
      :visible.sync="dialogReplay"
      :with-header="false"
      direction="rtl"
      custom-class="demo-drawer"
    >
      <div class="block">
        <!-- <div style="margin: 10px; text-align: center">
          <el-input
            v-model="newReplay.content"
            size="small"
            style="width: 400px; margin-right: 10px"
            placeholder="请输入复盘内容"
          ></el-input>
          <el-button
            type="primary"
            size="small"
            style="width: 100px"
            @click="addReplay"
          >
            提交
          </el-button>
        </div> -->
        <el-timeline>
          <el-timeline-item
            v-for="item in listRecords"
            :key="item.id"
            :timestamp="item.createTime"
            placement="top"
          >
            <el-card>
              <div @click="onShowFt(item)">
                <el-row :gutter="20">
                  <el-col :span="3" :offset="0">{{
                    item.type | recordTypeFlt
                  }}</el-col>
                  <el-col :span="21" :offset="0">{{ item.content }}</el-col>
                </el-row>
                <el-row
                  :gutter="20"
                  v-if="item.type === 0"
                  style="margin-top: 5px; margin-bottom: 5px"
                >
                  <el-col :span="6" :offset="0">{{ item.scene }}</el-col>
                  <el-col :span="6" :offset="0">{{
                    item.status === 0 ? '未成交' : '成交'
                  }}</el-col>
                  <el-col :span="6" :offset="0">{{ item.money }}</el-col>
                  <el-col :span="6" :offset="0">{{ item.recorder }}</el-col>
                </el-row>
                <el-row :gutter="20" v-if="item.type === 0">
                  <el-col :span="12" :offset="0">{{ item.trust }}</el-col>
                  <el-col :span="12" :offset="0">{{ item.item }}</el-col>
                </el-row>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        <el-drawer
          :append-to-body="true"
          :visible.sync="innerDrawer"
          size="28%"
        >
          <div class="box_1 flex-col">
            <div class="image-wrapper_62 flex-row">
              <img
                class="image_13"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNGd6f8d6f09c0f83caf7bfd690697cb2fa.png"
                :style="{'opacity': ftObj.ft1}"
                @click="ftObj.ft1=(ftObj.ft1+1)%2"
              />
              <img
                class="section_5"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNGa07f3d1e6aede6f9590b813bfec0427e.png"
                :style="{'opacity': ftObj.ft2}"
                @click="ftObj.ft2=(ftObj.ft2+1)%2"
              />
              <img
                class="label_3"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG9f65cdb5bc980271b6f2611941f8d311.png"
                :style="{'opacity': ftObj.ft3}"
                @click="ftObj.ft3=(ftObj.ft3+1)%2"
              />
              <img
                class="image_14"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG8bf2a8bc58d74ab5a870f9df5b5a7361.png"
                :style="{'opacity': ftObj.ft4}"
                @click="ftObj.ft4=(ftObj.ft4+1)%2"
              />
              <img
                class="label_4"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNGc3ab1ff84e34931c0e0569107b14df90.png"
                :style="{'opacity': ftObj.ft5}"
                @click="ftObj.ft5=(ftObj.ft5+1)%2"
              />
              <img
                class="label_5"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNGc209a4ac24962ecaf93cf2e23659174c.png"
                :style="{'opacity': ftObj.ft6}"
                @click="ftObj.ft6=(ftObj.ft6+1)%2"
              />
              <img
                class="image_21"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG5bb550c0605e4c4bab1efbf53a48aa37.png"
                :style="{'opacity': ftObj.ft7}"
                @click="ftObj.ft7=(ftObj.ft7+1)%2"
              />
              <img
                class="label_6"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG198eafce148df8ad7f24ae11cffe3fc5.png"
                :style="{'opacity': ftObj.ft8}"
                @click="ftObj.ft8=(ftObj.ft8+1)%2"
              />
            </div>
            <div class="image-wrapper_63 flex-row">
              <img
                class="image_9"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNGcef1c974b52ab5e0996ea32eca9aa91b.png"
                :style="{'opacity': ftObj.ft9}"
                @click="ftObj.ft9=(ftObj.ft9+1)%2"
              />
              <img
                class="image-wrapper_2"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG0d561e65437d192e2f529b20b9b6524e.png"
                :style="{'opacity': ftObj.ft10}"
                @click="ftObj.ft10=(ftObj.ft10+1)%2"
              />
              <img
                class="image_4"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG30059d34c334032f2ce22030a1ca92c3.png"
                :style="{'opacity': ftObj.ft11}"
                @click="ftObj.ft11=(ftObj.ft11+1)%2"
              />
              <img
                class="image-wrapper_1"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG9f29cec183a8e849b267de44029b671b.png"
                :style="{'opacity': ftObj.ft12}"
                @click="ftObj.ft12=(ftObj.ft12+1)%2"
              />
              <img
                class="image_8"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG83fc4f72e41ec7b32899ab111cef04cb.png"
                :style="{'opacity': ftObj.ft13}"
                @click="ftObj.ft13=(ftObj.ft13+1)%2"
              />
            </div>
            <div class="box_28 flex-row justify-end">
              <div class="group_51 flex-col justify-between">
                <div class="group_52 flex-row justify-between">
                  <div class="image-wrapper_64 flex-col justify-between">
                    <img
                      class="image_3"
                      referrerpolicy="no-referrer"
                      src="@/assets/faceimg/FigmaDDSSlicePNG1c2a6afa2946dc2bbedc4bdc5836b824.png"
                      :style="{'opacity': ftObj.ft14}"
                      @click="ftObj.ft14=(ftObj.ft14+1)%2"
                    />
                    <img
                      class="image_22"
                      referrerpolicy="no-referrer"
                      src="@/assets/faceimg/FigmaDDSSlicePNG976675beee712f90038dda9a96185792.png"
                      :style="{'opacity': ftObj.ft15}"
                      @click="ftObj.ft15=(ftObj.ft15+1)%2"
                    />
                  </div>
                  <div class="image-wrapper_65 flex-col justify-between">
                    <img
                      class="image_2"
                      referrerpolicy="no-referrer"
                      src="@/assets/faceimg/FigmaDDSSlicePNG47895a44bd3954b13db17b8a31fad29b.png"
                      :style="{'opacity': ftObj.ft16}"
                      @click="ftObj.ft16=(ftObj.ft16+1)%2"
                    />
                    <img
                      class="image_20"
                      referrerpolicy="no-referrer"
                      src="@/assets/faceimg/FigmaDDSSlicePNGa22530eed676d65c65e456619d2498d8.png"
                      :style="{'opacity': ftObj.ft17}"
                      @click="ftObj.ft17=(ftObj.ft17+1)%2"
                    />
                  </div>
                  <img
                    class="image_11"
                    referrerpolicy="no-referrer"
                    src="@/assets/faceimg/FigmaDDSSlicePNGb0742d814616c8d4fc6590b94d5aaab2.png"
                      :style="{'opacity': ftObj.ft18}"
                      @click="ftObj.ft18=(ftObj.ft18+1)%2"
                  />
                </div>
                <div class="image-wrapper_66 flex-row">
                  <img
                    class="image_23"
                    referrerpolicy="no-referrer"
                    src="@/assets/faceimg/FigmaDDSSlicePNG520b0f967e6576b83382214e81632501.png"
                      :style="{'opacity': ftObj.ft19}"
                      @click="ftObj.ft19=(ftObj.ft19+1)%2"
                  />
                  <img
                    class="label_1"
                    referrerpolicy="no-referrer"
                    src="@/assets/faceimg/FigmaDDSSlicePNGc9bbe330220a639366967a7d755ed9ed.png"
                    :style="{'opacity': ftObj.ft20}"
                    @click="ftObj.ft20=(ftObj.ft20+1)%2"
                  />
                  <img
                    class="label_2"
                    referrerpolicy="no-referrer"
                    src="@/assets/faceimg/FigmaDDSSlicePNGf40b15e2e83dfb84507f52c8c7b1c706.png"
                    :style="{'opacity': ftObj.ft21}"
                    @click="ftObj.ft21=(ftObj.ft21+1)%2"
                  />
                  <img
                    class="image-wrapper_11"
                    referrerpolicy="no-referrer"
                    src="@/assets/faceimg/FigmaDDSSlicePNG6b425ce7f90f9a12f838832e5b816284.png"
                    :style="{'opacity': ftObj.ft22}"
                    @click="ftObj.ft22=(ftObj.ft22+1)%2"
                  />
                </div>
              </div>
              <img
                class="image_12"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG4ce61aea64d65b308bc05b82243b2d0b.png"
                    :style="{'opacity': ftObj.ft23}"
                    @click="ftObj.ft23=(ftObj.ft23+1)%2"
              />
              <img
                class="image_10"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG98634cb8bc60f44e69e700bb8183d01b.png"
                    :style="{'opacity': ftObj.ft24}"
                    @click="ftObj.ft24=(ftObj.ft24+1)%2"
              />
            </div>
            <img
              class="image_1"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNGbcffb1ad790f8abb72bf3bf57439ea48.png"
                    :style="{'opacity': ftObj.ft25}"
                    @click="ftObj.ft25=(ftObj.ft25+1)%2"
            />
            <img
              class="image_7"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNG25cb09a07403b2cdce6bdf8aef5c821b.png"
                    :style="{'opacity': ftObj.ft26}"
                    @click="ftObj.ft26=(ftObj.ft26+1)%2"
            />
            <img
              class="image_15"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNG37daf858d243c7d010b305428f648951.png"
                    :style="{'opacity': ftObj.ft27}"
                    @click="ftObj.ft27=(ftObj.ft27+1)%2"
            />
            <img
              class="image_16"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNG90e04d2a6cb7ac8c2b52a1e188c4c436.png"
                    :style="{'opacity': ftObj.ft28}"
                    @click="ftObj.ft28=(ftObj.ft28+1)%2"
            />
            <img
              class="image-wrapper_10"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNGbdcb42bc7b607729aadd1ffc7cdbbf57.png"
                    :style="{'opacity': ftObj.ft29}"
                    @click="ftObj.ft29=(ftObj.ft29+1)%2"
            />
            <img
              class="image_17"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNG7d40fddf1b6f788538b6e6009ee8803e.png"
              :style="{'opacity': ftObj.ft30}"
              @click="ftObj.ft30=(ftObj.ft30+1)%2"
            />
            <img
              class="image_24"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNGc2d1fa355dcadd1e068250f13393df10.png"
              :style="{'opacity': ftObj.ft31}"
              @click="ftObj.ft31=(ftObj.ft31+1)%2"
            />
            <img
              class="image_25"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNG74d90986a46b23e67357208b63a5dbed.png"
              :style="{'opacity': ftObj.ft32}"
              @click="ftObj.ft32=(ftObj.ft32+1)%2"
            />
            <img
              class="image_26"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNGf94efa1465e929962901a87ad2968166.png"
              :style="{'opacity': ftObj.ft33}"
              @click="ftObj.ft33=(ftObj.ft33+1)%2"
            />
            <img
              class="image_27"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNGd511759099114528cfa5d8fbc689db6d.png"
              :style="{'opacity': ftObj.ft34}"
              @click="ftObj.ft34=(ftObj.ft34+1)%2"
            />
            <img
              class="image_28"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNGf1da8868b6d9075bcd5a53edb973604c.png"
              :style="{'opacity': ftObj.ft35}"
              @click="ftObj.ft35=(ftObj.ft35+1)%2"
            />
            <img
              class="image_29"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNG8f1035076325a4b070547f6fd5b1d697.png"
              :style="{'opacity': ftObj.ft36}"
              @click="ftObj.ft36=(ftObj.ft36+1)%2"
            />
            <img
              class="image_30"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNGc83d88a0cf10c7078caf18bda6340b2b.png"
              :style="{'opacity': ftObj.ft37}"
              @click="ftObj.ft37=(ftObj.ft37+1)%2"
            />
            <img
              class="image_5"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNG9ecd2ed5204b3a427da444e7ed2e97e1.png"
              :style="{'opacity': ftObj.ft38}"
              @click="ftObj.ft38=(ftObj.ft38+1)%2"
            />
            <img
              class="image_31"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNGac8f22b54e5a6b5aa398ed3af7667dbd.png"
              :style="{'opacity': ftObj.ft39}"
              @click="ftObj.ft39=(ftObj.ft39+1)%2"
            />
            <img
              class="image_32"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNG8d3283ec09c3852ec10320e2135d6b62.png"
              :style="{'opacity': ftObj.ft40}"
              @click="ftObj.ft40=(ftObj.ft40+1)%2"
            />
            <img
              class="image_33"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNGd54c948376162c51788edeb83b778f44.png"
              :style="{'opacity': ftObj.ft41}"
              @click="ftObj.ft41=(ftObj.ft41+1)%2"
            />
            <img
              class="label_7"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNG49b7ff9402410ae1f759b0c796a88e0c.png"
              :style="{'opacity': ftObj.ft42}"
              @click="ftObj.ft42=(ftObj.ft42+1)%2"
            />
            <img
              class="image-wrapper_5"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNG457cbf0ded796148cf052f500d1025c2.png"
              :style="{'opacity': ftObj.ft43}"
              @click="ftObj.ft43=(ftObj.ft43+1)%2"
            />
            <img
              class="image-wrapper_3"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNG18260904efe57d79c86db7d0d6c80360.png"
              :style="{'opacity': ftObj.ft44}"
              @click="ftObj.ft44=(ftObj.ft44+1)%2"
            />
            <img
              class="image-wrapper_23"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNGa25009aec592577d9b32c04b0f70e9a0.png"
              :style="{'opacity': ftObj.ft45}"
              @click="ftObj.ft45=(ftObj.ft45+1)%2"
            />
            <img
              class="image-wrapper_4"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNG2001cba437ca8186e51e475ed88a7c3f.png"
              :style="{'opacity': ftObj.ft46}"
              @click="ftObj.ft46=(ftObj.ft46+1)%2"
            />
            <img
              class="image_34"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNG1f93677cb6129395a70a015f2f78aef3.png"
              :style="{'opacity': ftObj.ft47}"
              @click="ftObj.ft47=(ftObj.ft47+1)%2"
            />
            <img
              class="image_19"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNG7704adbb371555e095651f41e4cad7f5.png"
              :style="{'opacity': ftObj.ft48}"
              @click="ftObj.ft48=(ftObj.ft48+1)%2"
            />
            <img
              class="image_18"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNG16ade9f43e38fc5489ade1c2112edd2f.png"
              :style="{'opacity': ftObj.ft49}"
              @click="ftObj.ft49=(ftObj.ft49+1)%2"
            />
            <img
              class="image_35"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNG63553e8024ff36303d19864c244854ba.png"
              :style="{'opacity': ftObj.ft50}"
              @click="ftObj.ft50=(ftObj.ft50+1)%2"
            />
            <img
              class="image_36"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNG8cb4150b2b56afdc8841e624a618d460.png"
              :style="{'opacity': ftObj.ft51}"
              @click="ftObj.ft51=(ftObj.ft51+1)%2"
            />
            <img
              class="image_37"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNG417874cae7d40a51e00c526732e4565e.png"
              :style="{'opacity': ftObj.ft52}"
              @click="ftObj.ft52=(ftObj.ft52+1)%2"
            />
          </div>
        </el-drawer>
      </div>
    </el-drawer>

    <el-drawer
      :visible.sync="dialogDeal"
      :with-header="false"
      direction="rtl"
      custom-class="demo-drawer"
    >
      <div class="block">
        <el-timeline style="margin-top: 10px">
          <el-timeline-item
            v-for="item in listDeals"
            :key="item.id"
            :timestamp="item.createTime"
            placement="top"
          >
            <el-card>
              <el-row :gutter="20">
                <el-col :span="4" :offset="0">{{ item.money }}元</el-col>
                <el-col :span="6" :offset="0">{{ item.item }}</el-col>
                <el-col :span="14" :offset="0">{{ item.analysis }}</el-col>
              </el-row>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-drawer>

    <el-drawer
      :visible.sync="dlgFace"
      :with-header="false"
      direction="rtl"
      custom-class="demo-drawer"
      size="90%"
      :before-close="handleClose"
    >
      <div class="index">
        <div>
          <div style="margin: 4px 0;">
            <el-button style="margin-left: 10px;" type="warning" @click="leaveCanvas">离开</el-button>
          </div>
          <img :src="facePic" style="border: none; z-index: 100;position: relative;" width="539">
        </div>
        <div>
          <div style="margin: 4px 0;text-align: right;">
            <!-- <el-button @click="initCanvas(true)">重新标记</el-button> -->
            <!-- <el-button style="margin-left: 10px;" type="success" @click="initCanvas(false)">面部区域选择</el-button> -->
            <el-button style="margin-right: 20px;" type="success" @click="dlgFaceTag=!dlgFaceTag">相法标签库</el-button>
            <!-- <el-button type="primary" @click="saveCanvas"> 保存面部 </el-button> -->
          </div>
          <div style="position: relative;">
            <!-- <div id="canvas"></div> -->
            <div class="box_1 flex-col">
              <div class="image-wrapper_62 flex-row">
                <img
                  class="image_13"
                  referrerpolicy="no-referrer"
                  src="@/assets/faceimg/FigmaDDSSlicePNGd6f8d6f09c0f83caf7bfd690697cb2fa.png"
                  :style="{'opacity': ftObj.ft1}"
                  @click="ftObj.ft1=(ftObj.ft1+1)%2"
                />
                <img
                  class="section_5"
                  referrerpolicy="no-referrer"
                  src="@/assets/faceimg/FigmaDDSSlicePNGa07f3d1e6aede6f9590b813bfec0427e.png"
                  :style="{'opacity': ftObj.ft2}"
                  @click="ftObj.ft2=(ftObj.ft2+1)%2"
                />
                <img
                  class="label_3"
                  referrerpolicy="no-referrer"
                  src="@/assets/faceimg/FigmaDDSSlicePNG9f65cdb5bc980271b6f2611941f8d311.png"
                  :style="{'opacity': ftObj.ft3}"
                  @click="ftObj.ft3=(ftObj.ft3+1)%2"
                />
                <img
                  class="image_14"
                  referrerpolicy="no-referrer"
                  src="@/assets/faceimg/FigmaDDSSlicePNG8bf2a8bc58d74ab5a870f9df5b5a7361.png"
                  :style="{'opacity': ftObj.ft4}"
                  @click="ftObj.ft4=(ftObj.ft4+1)%2"
                />
                <img
                  class="label_4"
                  referrerpolicy="no-referrer"
                  src="@/assets/faceimg/FigmaDDSSlicePNGc3ab1ff84e34931c0e0569107b14df90.png"
                  :style="{'opacity': ftObj.ft5}"
                  @click="ftObj.ft5=(ftObj.ft5+1)%2"
                />
                <img
                  class="label_5"
                  referrerpolicy="no-referrer"
                  src="@/assets/faceimg/FigmaDDSSlicePNGc209a4ac24962ecaf93cf2e23659174c.png"
                  :style="{'opacity': ftObj.ft6}"
                  @click="ftObj.ft6=(ftObj.ft6+1)%2"
                />
                <img
                  class="image_21"
                  referrerpolicy="no-referrer"
                  src="@/assets/faceimg/FigmaDDSSlicePNG5bb550c0605e4c4bab1efbf53a48aa37.png"
                  :style="{'opacity': ftObj.ft7}"
                  @click="ftObj.ft7=(ftObj.ft7+1)%2"
                />
                <img
                  class="label_6"
                  referrerpolicy="no-referrer"
                  src="@/assets/faceimg/FigmaDDSSlicePNG198eafce148df8ad7f24ae11cffe3fc5.png"
                  :style="{'opacity': ftObj.ft8}"
                  @click="ftObj.ft8=(ftObj.ft8+1)%2"
                />
              </div>
              <div class="image-wrapper_63 flex-row">
                <img
                  class="image_9"
                  referrerpolicy="no-referrer"
                  src="@/assets/faceimg/FigmaDDSSlicePNGcef1c974b52ab5e0996ea32eca9aa91b.png"
                  :style="{'opacity': ftObj.ft9}"
                  @click="ftObj.ft9=(ftObj.ft9+1)%2"
                />
                <img
                  class="image-wrapper_2"
                  referrerpolicy="no-referrer"
                  src="@/assets/faceimg/FigmaDDSSlicePNG0d561e65437d192e2f529b20b9b6524e.png"
                  :style="{'opacity': ftObj.ft10}"
                  @click="ftObj.ft10=(ftObj.ft10+1)%2"
                />
                <img
                  class="image_4"
                  referrerpolicy="no-referrer"
                  src="@/assets/faceimg/FigmaDDSSlicePNG30059d34c334032f2ce22030a1ca92c3.png"
                  :style="{'opacity': ftObj.ft11}"
                  @click="ftObj.ft11=(ftObj.ft11+1)%2"
                />
                <img
                  class="image-wrapper_1"
                  referrerpolicy="no-referrer"
                  src="@/assets/faceimg/FigmaDDSSlicePNG9f29cec183a8e849b267de44029b671b.png"
                  :style="{'opacity': ftObj.ft12}"
                  @click="ftObj.ft12=(ftObj.ft12+1)%2"
                />
                <img
                  class="image_8"
                  referrerpolicy="no-referrer"
                  src="@/assets/faceimg/FigmaDDSSlicePNG83fc4f72e41ec7b32899ab111cef04cb.png"
                  :style="{'opacity': ftObj.ft13}"
                  @click="ftObj.ft13=(ftObj.ft13+1)%2"
                />
              </div>
              <div class="box_28 flex-row justify-end">
                <div class="group_51 flex-col justify-between">
                  <div class="group_52 flex-row justify-between">
                    <div class="image-wrapper_64 flex-col justify-between">
                      <img
                        class="image_3"
                        referrerpolicy="no-referrer"
                        src="@/assets/faceimg/FigmaDDSSlicePNG1c2a6afa2946dc2bbedc4bdc5836b824.png"
                        :style="{'opacity': ftObj.ft14}"
                        @click="ftObj.ft14=(ftObj.ft14+1)%2"
                      />
                      <img
                        class="image_22"
                        referrerpolicy="no-referrer"
                        src="@/assets/faceimg/FigmaDDSSlicePNG976675beee712f90038dda9a96185792.png"
                        :style="{'opacity': ftObj.ft15}"
                        @click="ftObj.ft15=(ftObj.ft15+1)%2"
                      />
                    </div>
                    <div class="image-wrapper_65 flex-col justify-between">
                      <img
                        class="image_2"
                        referrerpolicy="no-referrer"
                        src="@/assets/faceimg/FigmaDDSSlicePNG47895a44bd3954b13db17b8a31fad29b.png"
                        :style="{'opacity': ftObj.ft16}"
                        @click="ftObj.ft16=(ftObj.ft16+1)%2"
                      />
                      <img
                        class="image_20"
                        referrerpolicy="no-referrer"
                        src="@/assets/faceimg/FigmaDDSSlicePNGa22530eed676d65c65e456619d2498d8.png"
                        :style="{'opacity': ftObj.ft17}"
                        @click="ftObj.ft17=(ftObj.ft17+1)%2"
                      />
                    </div>
                    <img
                      class="image_11"
                      referrerpolicy="no-referrer"
                      src="@/assets/faceimg/FigmaDDSSlicePNGb0742d814616c8d4fc6590b94d5aaab2.png"
                        :style="{'opacity': ftObj.ft18}"
                        @click="ftObj.ft18=(ftObj.ft18+1)%2"
                    />
                  </div>
                  <div class="image-wrapper_66 flex-row">
                    <img
                      class="image_23"
                      referrerpolicy="no-referrer"
                      src="@/assets/faceimg/FigmaDDSSlicePNG520b0f967e6576b83382214e81632501.png"
                        :style="{'opacity': ftObj.ft19}"
                        @click="ftObj.ft19=(ftObj.ft19+1)%2"
                    />
                    <img
                      class="label_1"
                      referrerpolicy="no-referrer"
                      src="@/assets/faceimg/FigmaDDSSlicePNGc9bbe330220a639366967a7d755ed9ed.png"
                      :style="{'opacity': ftObj.ft20}"
                      @click="ftObj.ft20=(ftObj.ft20+1)%2"
                    />
                    <img
                      class="label_2"
                      referrerpolicy="no-referrer"
                      src="@/assets/faceimg/FigmaDDSSlicePNGf40b15e2e83dfb84507f52c8c7b1c706.png"
                      :style="{'opacity': ftObj.ft21}"
                      @click="ftObj.ft21=(ftObj.ft21+1)%2"
                    />
                    <img
                      class="image-wrapper_11"
                      referrerpolicy="no-referrer"
                      src="@/assets/faceimg/FigmaDDSSlicePNG6b425ce7f90f9a12f838832e5b816284.png"
                      :style="{'opacity': ftObj.ft22}"
                      @click="ftObj.ft22=(ftObj.ft22+1)%2"
                    />
                  </div>
                </div>
                <img
                  class="image_12"
                  referrerpolicy="no-referrer"
                  src="@/assets/faceimg/FigmaDDSSlicePNG4ce61aea64d65b308bc05b82243b2d0b.png"
                      :style="{'opacity': ftObj.ft23}"
                      @click="ftObj.ft23=(ftObj.ft23+1)%2"
                />
                <img
                  class="image_10"
                  referrerpolicy="no-referrer"
                  src="@/assets/faceimg/FigmaDDSSlicePNG98634cb8bc60f44e69e700bb8183d01b.png"
                      :style="{'opacity': ftObj.ft24}"
                      @click="ftObj.ft24=(ftObj.ft24+1)%2"
                />
              </div>
              <img
                class="image_1"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNGbcffb1ad790f8abb72bf3bf57439ea48.png"
                      :style="{'opacity': ftObj.ft25}"
                      @click="ftObj.ft25=(ftObj.ft25+1)%2"
              />
              <img
                class="image_7"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG25cb09a07403b2cdce6bdf8aef5c821b.png"
                      :style="{'opacity': ftObj.ft26}"
                      @click="ftObj.ft26=(ftObj.ft26+1)%2"
              />
              <img
                class="image_15"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG37daf858d243c7d010b305428f648951.png"
                      :style="{'opacity': ftObj.ft27}"
                      @click="ftObj.ft27=(ftObj.ft27+1)%2"
              />
              <img
                class="image_16"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG90e04d2a6cb7ac8c2b52a1e188c4c436.png"
                      :style="{'opacity': ftObj.ft28}"
                      @click="ftObj.ft28=(ftObj.ft28+1)%2"
              />
              <img
                class="image-wrapper_10"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNGbdcb42bc7b607729aadd1ffc7cdbbf57.png"
                      :style="{'opacity': ftObj.ft29}"
                      @click="ftObj.ft29=(ftObj.ft29+1)%2"
              />
              <img
                class="image_17"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG7d40fddf1b6f788538b6e6009ee8803e.png"
                :style="{'opacity': ftObj.ft30}"
                @click="ftObj.ft30=(ftObj.ft30+1)%2"
              />
              <img
                class="image_24"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNGc2d1fa355dcadd1e068250f13393df10.png"
                :style="{'opacity': ftObj.ft31}"
                @click="ftObj.ft31=(ftObj.ft31+1)%2"
              />
              <img
                class="image_25"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG74d90986a46b23e67357208b63a5dbed.png"
                :style="{'opacity': ftObj.ft32}"
                @click="ftObj.ft32=(ftObj.ft32+1)%2"
              />
              <img
                class="image_26"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNGf94efa1465e929962901a87ad2968166.png"
                :style="{'opacity': ftObj.ft33}"
                @click="ftObj.ft33=(ftObj.ft33+1)%2"
              />
              <img
                class="image_27"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNGd511759099114528cfa5d8fbc689db6d.png"
                :style="{'opacity': ftObj.ft34}"
                @click="ftObj.ft34=(ftObj.ft34+1)%2"
              />
              <img
                class="image_28"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNGf1da8868b6d9075bcd5a53edb973604c.png"
                :style="{'opacity': ftObj.ft35}"
                @click="ftObj.ft35=(ftObj.ft35+1)%2"
              />
              <img
                class="image_29"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG8f1035076325a4b070547f6fd5b1d697.png"
                :style="{'opacity': ftObj.ft36}"
                @click="ftObj.ft36=(ftObj.ft36+1)%2"
              />
              <img
                class="image_30"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNGc83d88a0cf10c7078caf18bda6340b2b.png"
                :style="{'opacity': ftObj.ft37}"
                @click="ftObj.ft37=(ftObj.ft37+1)%2"
              />
              <img
                class="image_5"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG9ecd2ed5204b3a427da444e7ed2e97e1.png"
                :style="{'opacity': ftObj.ft38}"
                @click="ftObj.ft38=(ftObj.ft38+1)%2"
              />
              <img
                class="image_31"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNGac8f22b54e5a6b5aa398ed3af7667dbd.png"
                :style="{'opacity': ftObj.ft39}"
                @click="ftObj.ft39=(ftObj.ft39+1)%2"
              />
              <img
                class="image_32"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG8d3283ec09c3852ec10320e2135d6b62.png"
                :style="{'opacity': ftObj.ft40}"
                @click="ftObj.ft40=(ftObj.ft40+1)%2"
              />
              <img
                class="image_33"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNGd54c948376162c51788edeb83b778f44.png"
                :style="{'opacity': ftObj.ft41}"
                @click="ftObj.ft41=(ftObj.ft41+1)%2"
              />
              <img
                class="label_7"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG49b7ff9402410ae1f759b0c796a88e0c.png"
                :style="{'opacity': ftObj.ft42}"
                @click="ftObj.ft42=(ftObj.ft42+1)%2"
              />
              <img
                class="image-wrapper_5"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG457cbf0ded796148cf052f500d1025c2.png"
                :style="{'opacity': ftObj.ft43}"
                @click="ftObj.ft43=(ftObj.ft43+1)%2"
              />
              <img
                class="image-wrapper_3"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG18260904efe57d79c86db7d0d6c80360.png"
                :style="{'opacity': ftObj.ft44}"
                @click="ftObj.ft44=(ftObj.ft44+1)%2"
              />
              <img
                class="image-wrapper_23"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNGa25009aec592577d9b32c04b0f70e9a0.png"
                :style="{'opacity': ftObj.ft45}"
                @click="ftObj.ft45=(ftObj.ft45+1)%2"
              />
              <img
                class="image-wrapper_4"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG2001cba437ca8186e51e475ed88a7c3f.png"
                :style="{'opacity': ftObj.ft46}"
                @click="ftObj.ft46=(ftObj.ft46+1)%2"
              />
              <img
                class="image_34"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG1f93677cb6129395a70a015f2f78aef3.png"
                :style="{'opacity': ftObj.ft47}"
                @click="ftObj.ft47=(ftObj.ft47+1)%2"
              />
              <img
                class="image_19"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG7704adbb371555e095651f41e4cad7f5.png"
                :style="{'opacity': ftObj.ft48}"
                @click="ftObj.ft48=(ftObj.ft48+1)%2"
              />
              <img
                class="image_18"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG16ade9f43e38fc5489ade1c2112edd2f.png"
                :style="{'opacity': ftObj.ft49}"
                @click="ftObj.ft49=(ftObj.ft49+1)%2"
              />
              <img
                class="image_35"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG63553e8024ff36303d19864c244854ba.png"
                :style="{'opacity': ftObj.ft50}"
                @click="ftObj.ft50=(ftObj.ft50+1)%2"
              />
              <img
                class="image_36"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG8cb4150b2b56afdc8841e624a618d460.png"
                :style="{'opacity': ftObj.ft51}"
                @click="ftObj.ft51=(ftObj.ft51+1)%2"
              />
              <img
                class="image_37"
                referrerpolicy="no-referrer"
                src="@/assets/faceimg/FigmaDDSSlicePNG417874cae7d40a51e00c526732e4565e.png"
                :style="{'opacity': ftObj.ft52}"
                @click="ftObj.ft52=(ftObj.ft52+1)%2"
              />
            </div>

            <div v-show="dlgFaceTag" style="overflow-y: auto;padding: 20px;position: absolute;z-index: 100;width: 552px;height: 166px;background-color: #fff;bottom: 0;border-radius: 20px 20px 0 0;box-shadow: 0px 0px 10px rgb(201, 201, 201);">
              <div>
                <span
                  v-for="(item, index) in lstFaceTag" :key="index"
                  v-show="item.isok>0"
                  :style="{'background-color': item.isok===1?'#E5F0FF':'#FEE9E9','color': item.isok===1?'#237EFF':'#FF4D4D',
                  'padding': '3px 8px', 'font-size': '12px','margin': '0 10px 10px 0','border-radius': '6px','display': 'inline-block'}"
                >{{ item.tip }}</span>
              </div>
              <div style="background-color: #F5F5F5;padding: 10px 20px 1px 20px;border-radius: 8px;">
                <div
                  v-for="(item, index) in lstFaceTag" :key="index"
                  v-show="item.isok>0"
                  style="margin-bottom: 10px;"
                >{{ (index+1) + item.tag }}</div>
              </div>
            </div>
          </div>
        </div>
        <div style="margin-left: 10px;">
          <div style="margin-top: 4px;">
            <el-input v-model="faceNewTag" placeholder="请输入面部标签建议" style="width: 440px;"></el-input>
            <el-button type="primary" style="width: 120px;margin-left: 20px;" @click="onAddFace">提交建议</el-button>
          </div>
          <div v-show="dlgFaceTag" style="width: 640px;height: 899px;margin: 10px 0 20px 0;overflow-y: auto;">
            <div style="color: #237EFF;font-size: 30px;margin-bottom: 10px;">相法标签库</div>
            <!-- <el-radio-group v-model="rdFlag" @input="chkList=$options.data().chkList">
              <el-radio-button :label="0">好</el-radio-button>
              <el-radio-button :label="1">差</el-radio-button>
            </el-radio-group> -->
            <div style="color: #237EFF;">————————————————————————— 好 —————————————————————————</div>
            <div>
              <div>
                <h1>宏观</h1>
                <div style="display: flex;align-items: center;">
                  <h3 style="margin-right: 20px; width:100px;">皮-肉-骨</h3>
                  <el-checkbox-group v-model="chkList[0]">
                    <el-checkbox :label="0">皮</el-checkbox>
                    <el-checkbox :label="1">肉</el-checkbox>
                    <el-checkbox :label="2">骨</el-checkbox>
                  </el-checkbox-group>
                </div>
                <div style="display: flex;align-items: center;">
                  <h3 style="margin-right: 20px; width:100px;">上庭-中庭-下庭</h3>
                  <el-checkbox-group v-model="chkList[1]">
                    <el-checkbox :label="3">上庭</el-checkbox>
                    <el-checkbox :label="4">中庭</el-checkbox>
                    <el-checkbox :label="5">下庭</el-checkbox>
                  </el-checkbox-group>
                </div>
                <div style="display: flex;align-items: center;">
                  <h3 style="margin-right: 20px; width:100px;">外轮廓-内轮廓</h3>
                  <el-checkbox-group v-model="chkList[2]">
                    <el-checkbox :label="6">外轮廓</el-checkbox>
                    <el-checkbox :label="7">内轮廓</el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
              <div>
                <h1>中观</h1>
                <div style="display: flex;align-items: center;">
                  <h3 style="margin-right: 20px; width:100px;">面部的君臣</h3>
                  <el-checkbox-group v-model="chkList[3]">
                    <div style="width: 500px;word-wrap: break-word;">
                      <el-checkbox :label="8">福德宫-父母宫</el-checkbox>
                      <el-checkbox :label="9">父母宫-官禄宫</el-checkbox>
                      <el-checkbox :label="10">眉-眼</el-checkbox>
                      <el-checkbox :label="11">地库-嘴</el-checkbox>
                      <el-checkbox :label="12">外轮廓-内轮廓</el-checkbox>
                      <el-checkbox :label="13">额骨-鼻</el-checkbox>
                    </div>
                  </el-checkbox-group>
                </div>
                <div style="display: flex;align-items: center;">
                  <h3 style="margin-right: 20px; width:100px;">太极点出发</h3>
                  <el-checkbox-group v-model="chkList[4]">
                    <div style="width: 500px;word-wrap: break-word;">
                      <el-checkbox :label="14">颧-泪沟</el-checkbox>
                      <el-checkbox :label="15">颧-太阳穴</el-checkbox>
                      <el-checkbox :label="16">颧-外轮廓</el-checkbox>
                      <el-checkbox :label="17">颧-内轮廓</el-checkbox>
                      <el-checkbox :label="18">额骨-鼻</el-checkbox>
                      <el-checkbox :label="19">颧-法令</el-checkbox>
                      <el-checkbox :label="20">颧-人中</el-checkbox>
                      <el-checkbox :label="21">额骨-唇</el-checkbox>
                    </div>
                  </el-checkbox-group>
                </div>
              </div>
              <div>
                <h1>微观关键点</h1>
                <div style="display: flex;align-items: center;">
                  <h3 style="margin-right: 20px; width:100px;">耳</h3>
                  <el-checkbox-group v-model="chkList[5]">
                    <el-checkbox :label="22">天轮</el-checkbox>
                    <el-checkbox :label="23">人轮</el-checkbox>
                    <el-checkbox :label="24">地轮</el-checkbox>
                  </el-checkbox-group>
                </div>
                <div style="display: flex;align-items: center;">
                  <h3 style="margin-right: 20px; width:100px;">上庭</h3>
                  <el-checkbox-group v-model="chkList[6]">
                    <div style="width: 500px;word-wrap: break-word;">
                      <el-checkbox :label="25">火星(发迹)</el-checkbox>
                      <el-checkbox :label="26">丘陵/山林(发迹)</el-checkbox>
                      <el-checkbox :label="27">边城(福德)</el-checkbox>
                      <el-checkbox :label="28">日角/月角</el-checkbox>
                      <el-checkbox :label="29">天庭</el-checkbox>
                    </div>
                  </el-checkbox-group>
                </div>
                <div style="display: flex;align-items: center;">
                  <h3 style="margin-right: 20px; width:100px;">中庭</h3>
                  <el-checkbox-group v-model="chkList[7]">
                    <div style="width: 500px;word-wrap: break-word;">
                      <el-checkbox :label="30">紫霞/彩霞</el-checkbox>
                      <el-checkbox :label="31">紫气/凌云</el-checkbox>
                      <el-checkbox :label="32">印堂</el-checkbox>
                      <el-checkbox :label="33">山根</el-checkbox>
                      <el-checkbox :label="34">精舍/光殿</el-checkbox>
                      <el-checkbox :label="35">年上/寿上</el-checkbox>
                      <el-checkbox :label="36">准头</el-checkbox>
                      <el-checkbox :label="37">兰台/廷尉</el-checkbox>
                      <el-checkbox :label="38">太阴/中阴/少阴</el-checkbox>
                      <el-checkbox :label="39">颧</el-checkbox>
                      <el-checkbox :label="40">法令</el-checkbox>
                    </div>
                  </el-checkbox-group>
                </div>
                <div style="display: flex;align-items: center;">
                  <h3 style="margin-right: 20px; width:100px;">下庭</h3>
                  <el-checkbox-group v-model="chkList[8]">
                    <div style="width: 500px;word-wrap: break-word;">
                      <el-checkbox :label="41">人中</el-checkbox>
                      <el-checkbox :label="42">食仓/禄仓</el-checkbox>
                      <el-checkbox :label="43">水星</el-checkbox>
                      <el-checkbox :label="44">承浆</el-checkbox>
                      <el-checkbox :label="45">地库</el-checkbox>
                      <el-checkbox :label="46">地阁</el-checkbox>
                      <el-checkbox :label="47">奴仆</el-checkbox>
                    </div>
                  </el-checkbox-group>
                </div>
              </div>
            </div>
            <div style="color: red;margin: 10px 0;">————————————————————————— 差 —————————————————————————</div>
            <div>
              <div>
                <h1>宏观</h1>
                <div style="display: flex;align-items: center;">
                  <h3 style="margin-right: 20px; width:100px;">皮-肉-骨</h3>
                  <el-checkbox-group v-model="chkList2[0]">
                    <el-checkbox :label="0" class="checkbox-red">皮</el-checkbox>
                    <el-checkbox :label="1" class="checkbox-red">肉</el-checkbox>
                    <el-checkbox :label="2" class="checkbox-red">骨</el-checkbox>
                  </el-checkbox-group>
                </div>
                <div style="display: flex;align-items: center;">
                  <h3 style="margin-right: 20px; width:100px;">上庭-中庭-下庭</h3>
                  <el-checkbox-group v-model="chkList2[1]">
                    <el-checkbox :label="3" class="checkbox-red">上庭</el-checkbox>
                    <el-checkbox :label="4" class="checkbox-red">中庭</el-checkbox>
                    <el-checkbox :label="5" class="checkbox-red">下庭</el-checkbox>
                  </el-checkbox-group>
                </div>
                <div style="display: flex;align-items: center;">
                  <h3 style="margin-right: 20px; width:100px;">外轮廓-内轮廓</h3>
                  <el-checkbox-group v-model="chkList2[2]">
                    <el-checkbox :label="6" class="checkbox-red">外轮廓</el-checkbox>
                    <el-checkbox :label="7" class="checkbox-red">内轮廓</el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
              <div>
                <h1>中观</h1>
                <div style="display: flex;align-items: center;">
                  <h3 style="margin-right: 20px; width:100px;">面部的君臣</h3>
                  <el-checkbox-group v-model="chkList2[3]">
                    <div style="width: 500px;word-wrap: break-word;">
                      <el-checkbox :label="8" class="checkbox-red">福德宫-父母宫</el-checkbox>
                      <el-checkbox :label="9" class="checkbox-red">父母宫-官禄宫</el-checkbox>
                      <el-checkbox :label="10" class="checkbox-red">眉-眼</el-checkbox>
                      <el-checkbox :label="11" class="checkbox-red">地库-嘴</el-checkbox>
                      <el-checkbox :label="12" class="checkbox-red">外轮廓-内轮廓</el-checkbox>
                      <el-checkbox :label="13" class="checkbox-red">额骨-鼻</el-checkbox>
                    </div>
                  </el-checkbox-group>
                </div>
                <div style="display: flex;align-items: center;">
                  <h3 style="margin-right: 20px; width:100px;">太极点出发</h3>
                  <el-checkbox-group v-model="chkList2[4]">
                    <div style="width: 500px;word-wrap: break-word;">
                      <el-checkbox :label="14" class="checkbox-red">颧-泪沟</el-checkbox>
                      <el-checkbox :label="15" class="checkbox-red">颧-太阳穴</el-checkbox>
                      <el-checkbox :label="16" class="checkbox-red">颧-外轮廓</el-checkbox>
                      <el-checkbox :label="17" class="checkbox-red">颧-内轮廓</el-checkbox>
                      <el-checkbox :label="18" class="checkbox-red">额骨-鼻</el-checkbox>
                      <el-checkbox :label="19" class="checkbox-red">颧-法令</el-checkbox>
                      <el-checkbox :label="20" class="checkbox-red">颧-人中</el-checkbox>
                      <el-checkbox :label="21" class="checkbox-red">额骨-唇</el-checkbox>
                    </div>
                  </el-checkbox-group>
                </div>
              </div>
              <div>
                <h1>微观关键点</h1>
                <div style="display: flex;align-items: center;">
                  <h3 style="margin-right: 20px; width:100px;">耳</h3>
                  <el-checkbox-group v-model="chkList2[5]">
                    <el-checkbox :label="22" class="checkbox-red">天轮</el-checkbox>
                    <el-checkbox :label="23" class="checkbox-red">人轮</el-checkbox>
                    <el-checkbox :label="24" class="checkbox-red">地轮</el-checkbox>
                  </el-checkbox-group>
                </div>
                <div style="display: flex;align-items: center;">
                  <h3 style="margin-right: 20px; width:100px;">上庭</h3>
                  <el-checkbox-group v-model="chkList2[6]">
                    <div style="width: 500px;word-wrap: break-word;">
                      <el-checkbox :label="25" class="checkbox-red">火星(发迹)</el-checkbox>
                      <el-checkbox :label="26" class="checkbox-red">丘陵/山林(发迹)</el-checkbox>
                      <el-checkbox :label="27" class="checkbox-red">边城(福德)</el-checkbox>
                      <el-checkbox :label="28" class="checkbox-red">日角/月角</el-checkbox>
                      <el-checkbox :label="29" class="checkbox-red">天庭</el-checkbox>
                    </div>
                  </el-checkbox-group>
                </div>
                <div style="display: flex;align-items: center;">
                  <h3 style="margin-right: 20px; width:100px;">中庭</h3>
                  <el-checkbox-group v-model="chkList2[7]">
                    <div style="width: 500px;word-wrap: break-word;">
                      <el-checkbox :label="30" class="checkbox-red">紫霞/彩霞</el-checkbox>
                      <el-checkbox :label="31" class="checkbox-red">紫气/凌云</el-checkbox>
                      <el-checkbox :label="32" class="checkbox-red">印堂</el-checkbox>
                      <el-checkbox :label="33" class="checkbox-red">山根</el-checkbox>
                      <el-checkbox :label="34" class="checkbox-red">精舍/光殿</el-checkbox>
                      <el-checkbox :label="35" class="checkbox-red">年上/寿上</el-checkbox>
                      <el-checkbox :label="36" class="checkbox-red">准头</el-checkbox>
                      <el-checkbox :label="37" class="checkbox-red">兰台/廷尉</el-checkbox>
                      <el-checkbox :label="38" class="checkbox-red">太阴/中阴/少阴</el-checkbox>
                      <el-checkbox :label="39" class="checkbox-red">颧</el-checkbox>
                      <el-checkbox :label="40" class="checkbox-red">法令</el-checkbox>
                    </div>
                  </el-checkbox-group>
                </div>
                <div style="display: flex;align-items: center;">
                  <h3 style="margin-right: 20px; width:100px;">下庭</h3>
                  <el-checkbox-group v-model="chkList2[8]">
                    <div style="width: 500px;word-wrap: break-word;">
                      <el-checkbox :label="41" class="checkbox-red">人中</el-checkbox>
                      <el-checkbox :label="42" class="checkbox-red">食仓/禄仓</el-checkbox>
                      <el-checkbox :label="43" class="checkbox-red">水星</el-checkbox>
                      <el-checkbox :label="44" class="checkbox-red">承浆</el-checkbox>
                      <el-checkbox :label="45" class="checkbox-red">地库</el-checkbox>
                      <el-checkbox :label="46" class="checkbox-red">地阁</el-checkbox>
                      <el-checkbox :label="47" class="checkbox-red">奴仆</el-checkbox>
                    </div>
                  </el-checkbox-group>
                </div>
              </div>
            </div>
            <el-button type="primary" style="margin: 0 0 0 450px" @click="submitTags">确定</el-button>
          </div>
          <div v-show="!dlgFaceTag" style="width: 640px;height: 899px;margin-top: 4px;overflow-y: auto;">
            <!-- <div>
              <el-input v-model="faceNewTag" placeholder="请输入面部标签建议" style="width: 440px;"></el-input>
              <el-button type="primary" style="width: 120px;margin-left: 20px;" @click="onAddFace">提交建议</el-button>
            </div> -->
            <div style="margin-top: 20px;">
              <el-timeline style="padding: 0;flex: 1;">
                <el-timeline-item
                  v-for="(item, index) in lstFaceTag"
                  :key="index"
                  :timestamp="item.createTime"
                  placement="top"
                >
                  <el-card>
                    <div v-if="item.isok > 0" style="margin-bottom: 4px;font-size: 12px;">
                      <span v-if="item.isok===1" style="background-color: #E5F0FF;padding: 3px 8px;color: #237EFF;border-radius: 6px;">{{ item.tip }}</span>
                      <span v-else-if="item.isok===2" style="background-color: #FEE9E9;padding: 3px 8px;color: #FF4D4D;border-radius: 6px;">{{ item.tip }}</span>
                    </div>
                    <div @click="onShowFace(item.flag)">{{ item.tag }}</div>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  getClerks,
  getSomeSalon,
  getClerkList,
  addClerk,
  editClerk,
  delClerk,
  searchConsumersBySids,
  editClerkTag,
  getSalonsByMid,
  assignKeeper4Consumer
} from '@/api/txs'
import { getKeepsBySid } from '@/api/admin'
import { getRecordsByCid, addRecord, getDealsByCid, getFaceTagsByCid, addFaceTag, addFacePic, addFaceTags } from '@/api/ym'
import dayjs from 'dayjs'
import 'vue-lunar-calendar-pro/dist/calendar.css'
import Calendar from 'vue-lunar-calendar-pro'
import Pagination from '@/components/Pagination'
import { mapGetters } from 'vuex'
// import Konva from 'konva'
import faceTages from '@/utils/faceTags'
import '@/assets/css/facecom.css'
import '@/assets/css/face.css'

export default {
  filters: {
    fltTrust (val) {
      switch (val) {
        case 0:
          return '未破冰'
        case 1:
          return '已破冰(专业)'
        case 2:
          return '已破冰(易学)'
        case 3:
          return '已破冰(心理)'
        case 4:
          return '信任中(易学)'
        case 5:
          return '信任中(专业)'
        case 6:
          return '信任中(心理)'
        case 7:
          return '已信任(偏易学)'
        case 8:
          return '已信任(偏心理)'
        case 9:
          return '已信任(偏专业)'
      }
    },
    recordTypeFlt (type) {
      switch (type) {
        case 0:
          return '咨询'
        case 1:
          return '回访'
        case 2:
          return '复盘'
        case 3:
          return '客情'
        case 4:
          return '面部'
        default:
          return '未知'
      }
    },
    parseTime (time) {
      return dayjs(time).format('YYYY-MM-DD')
    },
    typeFilter (grade) {
      const gradeMap = {
        0: 'info',
        1: '',
        2: 'warning',
        3: 'danger'
      }
      return gradeMap[grade]
    },
    gradeFilter (grade) {
      const gradeMap = {
        0: '门外',
        1: '锦鲤',
        2: '慧颜',
        3: '婵心'
      }
      return gradeMap[grade]
    },
    bg5Ftr (val) {
      if (val.report && val.report.length > 0) {
        if (val.sex === 0) {
          if (val.report.includes('40')) {
            return '1号'
          }
          if (val.report.includes('41')) {
            return '2号'
          }
          if (val.report.includes('30')) {
            return '3号'
          }
          if (val.report.includes('31')) {
            return '4号'
          }
          if (val.report.includes('50')) {
            return '5号'
          }
          if (val.report.includes('51')) {
            return '6号'
          }
          if (val.report.includes('63')) {
            return '7号'
          }
          if (val.report.includes('64')) {
            return '8号'
          }
          if (val.report.includes('70')) {
            return '9号'
          }
          if (val.report.includes('71')) {
            return '10号'
          }
        } else {
          if (val.report.includes('167')) {
            return '1号'
          }
          if (val.report.includes('168')) {
            return '2号'
          }
          if (val.report.includes('157')) {
            return '3号'
          }
          if (val.report.includes('158')) {
            return '4号'
          }
          if (val.report.includes('177')) {
            return '5号'
          }
          if (val.report.includes('178')) {
            return '6号'
          }
          if (val.report.includes('190')) {
            return '7号'
          }
          if (val.report.includes('191')) {
            return '8号'
          }
          if (val.report.includes('197')) {
            return '9号'
          }
          if (val.report.includes('198')) {
            return '10号'
          }
        }
      } else {
        return '请先出报告'
      }
    }
  },
  components: {
    Calendar,
    Pagination
  },
  data () {
    return {
      salonsOfMid: [],
      clerksOfSalon: [],
      keepersOfSalon: [],
      theClerks: [],
      theKeepr: undefined,
      theSalon: undefined,
      showAssgin: false,
      innerDrawer: false,
      ftObj: {
        ft1: 0,
        ft2: 0,
        ft3: 0,
        ft4: 0,
        ft5: 0,
        ft6: 0,
        ft7: 0,
        ft8: 0,
        ft9: 0,
        ft10: 0,
        ft11: 0,
        ft12: 0,
        ft13: 0,
        ft14: 0,
        ft15: 0,
        ft16: 0,
        ft17: 0,
        ft18: 0,
        ft19: 0,
        ft20: 0,
        ft21: 0,
        ft22: 0,
        ft23: 0,
        ft24: 0,
        ft25: 0,
        ft26: 0,
        ft27: 0,
        ft28: 0,
        ft29: 0,
        ft30: 0,
        ft31: 0,
        ft32: 0,
        ft33: 0,
        ft34: 0,
        ft35: 0,
        ft36: 0,
        ft37: 0,
        ft38: 0,
        ft39: 0,
        ft40: 0,
        ft41: 0,
        ft42: 0,
        ft43: 0,
        ft44: 0,
        ft45: 0,
        ft46: 0,
        ft47: 0,
        ft48: 0,
        ft49: 0,
        ft50: 0,
        ft51: 0,
        ft52: 0
      },
      faceConsumer: undefined,
      rdFlag: 0,
      chkList: [
        [],[],[],[],[],[],[],[],[]
      ],
      chkList2: [
        [],[],[],[],[],[],[],[],[]
      ],
      dlgFaceTag: false,
      faceNewTag: '',
      facePic: '',
      facerId: undefined,
      isTagged: false,
      lstFaceTag: [],
      layer: undefined,
      stage: undefined,
      dlgFace: false,
      showPage: true,
      newReplay: {
        content: ''
      },
      bg3List: [],
      bg4List: [],
      optTrust: [
        {
          value: 0,
          label: '未破冰'
        },
        {
          value: 1,
          label: '已专业破冰'
        },
        {
          value: 2,
          label: '已易学破冰'
        },
        {
          value: 3,
          label: '已心理破冰'
        },
        {
          value: 4,
          label: '偏易学信任过程中'
        },
        {
          value: 5,
          label: '偏专业信任过程中'
        },
        {
          value: 6,
          label: '偏心理信任过程中'
        },
        {
          value: 7,
          label: '已完全信任（偏易学）'
        },
        {
          value: 8,
          label: '已完全信任（偏心理）'
        },
        {
          value: 9,
          label: '已完全信任（偏专业）'
        }
      ],
      listKeeps: [{ id: 0, nickName: '无' }],
      clerkSelection: [],
      condition1: '',
      condition2: '',
      condition3: '',
      condition4: '',
      total: 0,
      listQuery: {
        page: 1,
        limit: 12
      },

      tagSj: '',
      tagKq: '',
      tagQt: '',
      track: '',
      picker: '',
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialog: false,
      dialogReplay: false,
      dialogDeal: false,
      clerkCp: {},
      clerk: {
        id: undefined,
        sid: undefined,
        kid: undefined,
        kname: '',
        pic: '',
        status: 0,
        sex: 1,
        tel: '',
        post: '',
        solar: '',
        lunar: '',
        btime: '',
        city: '',
        ccode: '',
        cname: '',
        ngz: '',
        ngx: '',
        ygz: '',
        ygx: '',
        rgz: '',
        rgx: '',
        sgz: '',
        sgx: '',
        nzz: '',
        nzx: '',
        yzz: '',
        yzx: '',
        rzz: '',
        rzx: '',
        szz: '',
        szx: '',
        report: '',
        tagsj: '',
        tagkq: '',
        tagqt: '',
        track: '',
        reason: '',
        // createTime: new Date(),
        code: '',
        sname: '',
        address: '',
        developer: '',
        gzn: '',
        gzy: '',
        gzr: ''
      },
      title: '',
      list: null,
      listSalon: null,
      listLoading: true,
      listRecords: [],
      listDeals: [],
      rules: {
        sid: [{ required: true, message: '请选择归属店铺', trigger: 'change' }],
        cname: [{ required: true, message: '必填项', trigger: 'blur' }],
        // solar: [{ required: true, message: '必填项', trigger: 'blur' }],
        // lunar: [{ required: true, message: '必填项', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        post: [{ required: true, message: '请选择客户角色', trigger: 'change' }]
      }
    }
  },
  computed: {
    ...mapGetters(['name', 'id', 'deptId']),
    salonIds() {
      return this.listSalon && this.listSalon.length > 0 ? this.listSalon.map(s => s.id).join(',') : '0'
    }
  },
  created () {
    // this.fetchData()
    this.salonId = this.$route.params.sid
    this.keeperId = this.$route.params.kid
    this.getList()
  },
  methods: {
    onTheSalon() {
      if(this.theSalon) {
        this.theClerks = []
        this.theKeepr = undefined
        getClerks(this.theSalon).then(res => {
          this.clerksOfSalon = res.data.data
        })
        getKeepsBySid(this.theSalon).then(res => {
          this.listKeeps = res.data.data
        })
      }
    },
    initAssignKeeper() {
      getSalonsByMid(this.id).then(res =>{
        this.salonsOfMid = res.data.data
        if(!this.salonsOfMid || this.salonsOfMid.size == 0){
          this.$alert('该中台社群没有顾客！', '警告', {
            type: 'warning',
            confirmButtonText: '确定'
          })
        } else {
          this.showAssgin = true
        }
      })
    },
    leaveAssgin() {
      this.getList()
      this.showAssgin = false
    },
    updateAssgin() {
      assignKeeper4Consumer({
        kid: this.theKeepr,
        kname: this.listKeeps.find(k => k.id === this.theKeepr).nickName,
        ids: this.theClerks
      }).then(_=>{
        this.theClerks = []
        this.$notify({
          title: 'Success',
          message: '提交成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    onShowFt(val) {
      if(val.type === 4){
        for (let i = 1; i < 53; i++) {
          if(val.trust.includes(','+i+',')) {
            this.ftObj['ft'+i] = 1
          } else {
            this.ftObj['ft'+i] = 0
          }
        }
        this.innerDrawer = true
      }
    },
    onShowFace(val){
      for (let i = 1; i < 53; i++) {
        if(val.includes(','+i+',')) {
          this.ftObj['ft'+i] = 1
        } else {
          this.ftObj['ft'+i] = 0
        }
      }
    },
    getFtidxs() {
      let reval = ','
      for (let i = 1; i < 53; i++) {
        if(this.ftObj['ft'+i] > 0) {
          reval = reval + i + ','
        }
      }
      // return reval.slice(0, reval.length-1)
      return reval
    },
    submitTags() {
      const tags = []
      this.chkList.forEach(c => {
        c.forEach(f=>{
          // const idx = f*2+this.rdFlag
          const idx = f*2
          tags.push({cid: this.facerId, tag: faceTages[idx].proposal, tip: faceTages[idx].tag, flag: this.getFtidxs(),isok: faceTages[idx].flag, createTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')})
          addRecord({
            cid: this.facerId,
            status: faceTages[idx].flag,
            content: faceTages[idx].proposal,
            trust: this.getFtidxs(),
            item: faceTages[idx].tag,
            type: 4,
            recorder: this.name
          })
        })
      })
      this.chkList2.forEach(c => {
        c.forEach(f=>{
          const idx = f*2+1
          tags.push({cid: this.facerId, tag: faceTages[idx].proposal, tip: faceTages[idx].tag, flag: this.getFtidxs(),isok: faceTages[idx].flag, createTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')})
          addRecord({
            cid: this.facerId,
            status: faceTages[idx].flag,
            content: faceTages[idx].proposal,
            trust: this.getFtidxs(),
            item: faceTages[idx].tag,
            type: 4,
            recorder: this.name
          })
        })
      })
      this.chkList=this.$options.data().chkList
      this.chkList2=this.$options.data().chkList2
      if(tags.length > 0){
        addFaceTags(tags).then(_=>{
          this.lstFaceTag.unshift(...tags)
          this.$notify({
            title: 'Success',
            message: '提交成功',
            type: 'success',
            duration: 2000
          })
        })
      }
      this.dlgFaceTag=false
    },
    onAddFace() {
      if(this.faceNewTag !== '') {
        addFaceTag({cid: this.facerId, tag: this.faceNewTag, flag: this.getFtidxs(), isok: 0}).then(res => {
          this.lstFaceTag.unshift(res.data.data)
        })
        addRecord({
          cid: this.facerId,
          status: 0,
          content: this.faceNewTag,
          trust: this.getFtidxs(),
          type: 4,
          recorder: this.name
        })
        this.faceNewTag = ''
      }
    },
    leaveCanvas() {
      this.ftObj = this.$options.data().ftObj
      this.dlgFace = false
    },
    handleClose(done){
      this.ftObj = this.$options.data().ftObj
      done()
    },
    initFace(val) {
      this.faceConsumer = val
      this.facePic = val.pic
      this.facerId = val.id
      this.isTagged = val.isTagged === 1
      getFaceTagsByCid(val.id).then(res => {
        this.lstFaceTag = res.data.data
        this.dlgFace = true
      })
    },
    change(xq, star) {
      switch(xq) {
        case 1:
          if(star === 1 && this.clerkCp.xq1 === 1){
            this.clerk.xq1 = 0
          }
          this.clerkCp.xq1 = this.clerk.xq1
          break
        case 2:
          if(star === 1 && this.clerkCp.xq2 === 1){
            this.clerk.xq2 = 0
          }
          this.clerkCp.xq2 = this.clerk.xq2
          break
        case 3:
          if(star === 1 && this.clerkCp.xq3 === 1){
            this.clerk.xq3 = 0
          }
          this.clerkCp.xq3 = this.clerk.xq3
          break
        case 4:
          if(star === 1 && this.clerkCp.xq4 === 1){
            this.clerk.xq4 = 0
          }
          this.clerkCp.xq4 = this.clerk.xq4
          break
        case 5:
          if(star === 1 && this.clerkCp.xq5 === 1){
            this.clerk.xq5 = 0
          }
          this.clerkCp.xq5 = this.clerk.xq5
          break
        case 6:
          if(star === 1 && this.clerkCp.xq6 === 1){
            this.clerk.xq6 = 0
          }
          this.clerkCp.xq6 = this.clerk.xq6
          break
        case 7:
          if(star === 1 && this.clerkCp.xq7 === 1){
            this.clerk.xq7 = 0
          }
          this.clerkCp.xq7 = this.clerk.xq7
          break
        case 8:
          if(star === 1 && this.clerkCp.xq8 === 1){
            this.clerk.xq8 = 0
          }
          this.clerkCp.xq8 = this.clerk.xq8
          break
        case 9:
          if(star === 1 && this.clerkCp.xq9 === 1){
            this.clerk.xq9 = 0
          }
          this.clerkCp.xq9 = this.clerk.xq9
          break
        case 10:
          if(star === 1 && this.clerkCp.xq10 === 1){
            this.clerk.xq10 = 0
          }
          this.clerkCp.xq10 = this.clerk.xq10
          break
        case 11:
          if(star === 1 && this.clerkCp.xq11 === 1){
            this.clerk.xq11 = 0
          }
          this.clerkCp.xq11 = this.clerk.xq11
          break
        case 12:
          if(star === 1 && this.clerkCp.xq12 === 1){
            this.clerk.xq12 = 0
          }
          this.clerkCp.xq12 = this.clerk.xq12
          break
        case 13:
          if(star === 1 && this.clerkCp.xq13 === 1){
            this.clerk.xq13 = 0
          }
          this.clerkCp.xq13 = this.clerk.xq13
          break
        case 14:
          if(star === 1 && this.clerkCp.xq14 === 1){
            this.clerk.xq14 = 0
          }
          this.clerkCp.xq14 = this.clerk.xq14
          break
        case 15:
          if(star === 1 && this.clerkCp.xq15 === 1){
            this.clerk.xq15 = 0
          }
          this.clerkCp.xq15 = this.clerk.xq15
          break
        case 16:
          if(star === 1 && this.clerkCp.xq16 === 1){
            this.clerk.xq16 = 0
          }
          this.clerkCp.xq16 = this.clerk.xq16
          break
        case 17:
          if(star === 1 && this.clerkCp.xq17 === 1){
            this.clerk.xq17 = 0
          }
          this.clerkCp.xq17 = this.clerk.xq17
          break
        case 18:
          if(star === 1 && this.clerkCp.xq18 === 1){
            this.clerk.xq18 = 0
          }
          this.clerkCp.xq18 = this.clerk.xq18
          break
        case 19:
          if(star === 1 && this.clerkCp.xq19 === 1){
            this.clerk.xq19 = 0
          }
          this.clerkCp.xq19 = this.clerk.xq19
          break
        case 20:
          if(star === 1 && this.clerkCp.xq20 === 1){
            this.clerk.xq20 = 0
          }
          this.clerkCp.xq20 = this.clerk.xq20
          break
        case 21:
          if(star === 1 && this.clerkCp.xq21 === 1){
            this.clerk.xq21 = 0
          }
          this.clerkCp.xq21 = this.clerk.xq21
          break
        case 22:
          if(star === 1 && this.clerkCp.xq22 === 1){
            this.clerk.xq22 = 0
          }
          this.clerkCp.xq22 = this.clerk.xq22
          break
        case 23:
          if(star === 1 && this.clerkCp.xq23 === 1){
            this.clerk.xq23 = 0
          }
          this.clerkCp.xq23 = this.clerk.xq23
          break
        case 24:
          if(star === 1 && this.clerkCp.xq24 === 1){
            this.clerk.xq24 = 0
          }
          this.clerkCp.xq24 = this.clerk.xq24
          break
        case 25:
          if(star === 1 && this.clerkCp.xq25 === 1){
            this.clerk.xq25 = 0
          }
          this.clerkCp.xq25 = this.clerk.xq25
          break
        case 26:
          if(star === 1 && this.clerkCp.xq26 === 1){
            this.clerk.xq26 = 0
          }
          this.clerkCp.xq26 = this.clerk.xq26
          break
        case 27:
          if(star === 1 && this.clerkCp.xq27 === 1){
            this.clerk.xq27 = 0
          }
          this.clerkCp.xq27 = this.clerk.xq27
          break
        case 28:
          if(star === 1 && this.clerkCp.xq28 === 1){
            this.clerk.xq28 = 0
          }
          this.clerkCp.xq28 = this.clerk.xq28
          break
        case 29:
          if(star === 1 && this.clerkCp.xq29 === 1){
            this.clerk.xq29 = 0
          }
          this.clerkCp.xq29 = this.clerk.xq29
          break
        case 30:
          if(star === 1 && this.clerkCp.xq30 === 1){
            this.clerk.xq30 = 0
          }
          this.clerkCp.xq30 = this.clerk.xq30
          break
      }
    },
    dealList (cid) {
      getDealsByCid(cid).then(res => {
        this.listDeals = res.data.data
        this.dialogDeal = true
      })
    },
    addReplay () {
      addRecord(this.newReplay).then(_ => {
        this.dialogReplay = false
        this.$notify({
          title: 'Success',
          message: '更新成功',
          type: 'success',
          duration: 2000
        })
        this.newReplay = {}
      })
    },
    replay (cid) {
      getRecordsByCid(cid).then(res => {
        this.listRecords = res.data.data
        this.newReplay.cid = cid
        this.newReplay.recorder = this.name
        this.newReplay.type = 2
        this.dialogReplay = true
      })
    },
    setTags () {
      this.clerk.bg3 = this.bg3List.join(' ')
      this.clerk.bg4 = this.bg4List.join(' ')
      editClerkTag(this.clerk).then(_ => {
        const index = this.list.findIndex(v => v.id === this.clerk.id)
        this.list.splice(index, 1, this.clerk)
        this.dialog = false
        this.$notify({
          title: 'Success',
          message: '更新成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    getList () {
      if(!this.salonId || !Number.isFinite(+this.salonId)) {
        this.listLoading = false
        return
      }
      this.listLoading = true
      getSomeSalon(undefined, undefined, undefined, undefined, undefined, undefined, this.salonId).then(res => {
        this.listSalon = res.data.data
        getClerkList(this.listQuery.page, this.listQuery.limit, this.deptId, this.id, '1', this.salonIds, Number.isFinite(+this.keeperId)?this.keeperId:undefined).then(res => {
          this.list = res.data.data.records
          this.total = res.data.data.total
          this.listLoading = false
        })
      })
    },
    sexf (row) {
      return row.sex === 0 ? '男' : '女'
    },
    // fetchData () {
    //   getSomeSalon(undefined, undefined, undefined, undefined, undefined, this.id).then(res => {
    //     this.listSalon = res.data.data
    //   })
    // },
    wnlclick (e) {
      this.clerk.solar = e.year + '年' + e.month + '月' + e.day + '日'
      this.clerk.lunar = e.gzYear + '年' + e.lunarMonth + e.lunar
      this.clerk.gzn = e.gzYear
      this.clerk.gzy = e.gzMonth
      this.clerk.gzr = e.gzDay
    },
    changeDate (val) {
      var dateArr = val.split('-')
      this.$refs.calendar.render(dateArr[0], dateArr[1])
    },
    handleCreate () {
      this.title = '新增'
      this.clerk = this.$options.data().clerk
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    cleckInfo (row) {
      this.dialogFormVisible2 = true
      this.clerk = Object.assign({}, row)
    },
    consumerTag (row) {
      this.dialog = true
      this.clerk = Object.assign({}, row)
      this.clerkCp = { ...this.clerk }
      this.bg3List = []
      this.bg4List = []
      if (this.clerk.bg3 && this.clerk.bg3.length > 0) {
        this.bg3List = this.clerk.bg3.split(' ')
      }
      if (this.clerk.bg4 && this.clerk.bg4.length > 0) {
        this.bg4List = this.clerk.bg4.split(' ')
      }
      // console.log(this.clerk)
    },
    handleUpdate (row) {
      getKeepsBySid(row.sid).then(res => {
        this.listKeeps = res.data.data
        this.listKeeps.unshift({ id: 0, nickName: '无' })
      })
      this.title = '编辑'
      this.dialogFormVisible = true
      this.clerk = Object.assign({}, row)

      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData () {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          const tempData = Object.assign({}, this.clerk)
          if (this.clerk.kid && this.clerk.kid > 0) {
            tempData.kname = this.listKeeps.find(
              k => k.id === this.clerk.kid
            ).nickName
          } else {
            tempData.kid = undefined
            tempData.kname = undefined
          }
          if (this.title === '新增') {
            // if (tempData.post === '老板') {
            //   tempData.ccode = tempData.code + '-a'
            // } else if (tempData.post === '客户') {
            tempData.ccode = tempData.code + '-c'
            // } else {
            //   tempData.ccode = tempData.code + '-b'
            // }
            tempData.creator = this.name
            tempData.checked = 0
            addClerk(tempData).then(res => {
              const d = res.data.data
              this.list.unshift(d)
              this.dialogFormVisible = false
              this.$notify({
                title: 'Success',
                message: '添加成功',
                type: 'success',
                duration: 2000
              })
            })
          } else if (this.title === '编辑') {
            editClerk(tempData).then(res => {
              const d = res.data.data
              const index = this.list.findIndex(v => v.id === this.clerk.id)
              this.list.splice(index, 1, d)
              this.dialogFormVisible = false
              this.$notify({
                title: 'Success',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            })
          }
        }
      })
    },
    handleDelete (id, index) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delClerk(id).then(() => {
            this.$notify({
              title: 'Success',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
          })
          this.list.splice(index, 1)
        })
        .catch(() => {})
    },
    selectSalon (sid) {
      getKeepsBySid(sid).then(res => {
        this.listKeeps = res.data.data
        this.listKeeps.unshift({ id: 0, nickName: '无' })
      })
      const salon = this.listSalon.find(v => {
        return v.id === sid
      })
      this.clerk.sname = salon.sname
      // this.clerk.address = salon.address
      this.clerk.developer = salon.developer
      this.clerk.code = salon.code
    },
    searchClerk () {
      if (
        this.condition1 === '' &&
        this.condition2 === '' &&
        this.condition3 === '' &&
        this.condition4 === ''
      ) {
        this.clerkSelection = []
        this.listQuery = this.$options.data().listQuery
        this.getList()
      } else {
        this.listLoading = true
        searchConsumersBySids(this.condition1, this.condition2, this.condition3, this.condition4, this.salonIds)
          .then(res => {
            this.list = res.data.data
            this.total = 0
            this.listLoading = false
          })
          .catch(() => {
            this.$alert('获取信息故障，请联系管理员！', '服务器错误', {
              type: 'error',
              confirmButtonText: '确定'
            })
          })
      }
    },
    resetClerk () {
      this.condition1 = ''
      this.condition2 = ''
      this.condition3 = ''
      this.condition4 = ''
      this.clerkSelection = []

      this.listQuery = this.$options.data().listQuery
      this.getList()
    },
    handleReport () {
      const link = document.createElement('a')
      link.setAttribute('download', '')
      document.body.appendChild(link)
      this.clerkSelection.forEach(item => {
        // window.open('/customreport/' + item.id + '.pdf', '_blank')
        link.href = '/customreport/' + item.id + '.pdf'
        link.click()
      })
      document.body.removeChild(link)
    },
    handleSelectionChange (val) {
      this.clerkSelection = val
    }
  }
}
</script>

<style>
.checkbox-red .el-checkbox__input.is-checked .el-checkbox__inner {
  border-color: red;
  background-color: red;
}
.checkbox-red .el-checkbox__input.is-checked + .el-checkbox__label {
  color: red;
}
.el-drawer.rtl {
  overflow: scroll;
}
.el-drawer__container ::-webkit-scrollbar {
  display: none;
}
</style>
<style lang="scss" scoped>
.index {
  #canvas {
    // background-color: #eee;
    // border: 1px solid #666;
    height: 859px;
    width: 539px;
  }
  display: flex;
}
.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 0 0 15px 0;
}
.demo-drawer__content {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
}
.demo-drawer__footer {
  display: flex;
  padding: 20px;
  justify-content: flex-end;
}
.interest {
  display: flex;
  div {
    margin: 0px 10px 15px 5px;
    text-align: center;
  }
}
</style>
